<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { useGetNoRegisterCodeList } from '@/services/pages/code'
  import { nextTick, ref } from 'vue'
  import _ from 'lodash'
  import useGoods from '../useGoods'
  import { TableInstance } from 'element-plus'

  const {
    noRegisterCodeList,
    noRegisterCodeListTotal,
    getNoRegisterCodeListParam,
    getNoRegisterCodeListLoading,
    getNoRegisterCodeList,
  } = useGetNoRegisterCodeList()
  const { goods } = useGoods()

  // 分页组件实例
  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)
  const selectedNoRegisterCodes = ref<Array<CodeNoRegisterCodeList>>([])
  const unSelectedNoRegisterCodes = ref<Array<CodeNoRegisterCodeList>>([])

  // 表格组件实例
  const tableInstance = ref<TableInstance | null>(null)

  const handleSelectCode = (codes: Array<CodeNoRegisterCodeList>, row: CodeNoRegisterCodeList) => {
    selectedNoRegisterCodes.value = codes
    const isExist = codes.some(
      (code) =>
        code.goodsId === row.goodsId &&
        code.goodsSpecId === row.goodsSpecId &&
        code.code === row.code,
    )
    if (goods.value.filter((item) => [1, 2].includes(item.type)).length > 0 && !isExist) {
      unSelectedNoRegisterCodes.value.push(row)
    }
  }

  const handleSelectAllGood = (codes: Array<CodeNoRegisterCodeList>) => {
    selectedNoRegisterCodes.value = codes
    unSelectedNoRegisterCodes.value = []
  }

  const _getList = async () => {
    if (tableInstance.value && paginationInstance.value) {
      getNoRegisterCodeListParam.value.limit = paginationInstance.value.size
      getNoRegisterCodeListParam.value.page = paginationInstance.value.current
      await getNoRegisterCodeList()
      nextTick(() => {
        noRegisterCodeList.value.forEach((item) => {
          const index = goods.value
            .filter((item) => [1, 2].includes(item.type))
            .findIndex(
              (good) =>
                good.goodId === item.goodsId &&
                good.goodSpecId === item.goodsSpecId &&
                good.code === item.code,
            )
          if (index >= 0 && tableInstance.value) {
            tableInstance.value.toggleRowSelection(item, true)
          }
        })
      })
    }
  }

  defineExpose({
    getList: (code = '', model = '', registerCode = '') => {
      getNoRegisterCodeListParam.value.code = code
      getNoRegisterCodeListParam.value.model = model
      getNoRegisterCodeListParam.value.registerCode = registerCode
      _getList()
    },
    getSelectedNoRegisterCodes: () => {
      return _.cloneDeep(selectedNoRegisterCodes.value)
    },
    getUnSelectedNoRegisterCodes: () => {
      return _.cloneDeep(unSelectedNoRegisterCodes.value)
    },
  })
</script>

<template>
  <div v-loading="getNoRegisterCodeListLoading" class="no-register-goods-wrapper">
    <div class="table">
      <el-table
        ref="tableInstance"
        :border="true"
        stripe
        resizable
        height="100%"
        :data="noRegisterCodeList"
        @select-all="handleSelectAllGood"
        @select="handleSelectCode"
      >
        <!-- 选择 -->
        <el-table-column type="selection" width="50" fixed />

        <!-- 序号 -->
        <el-table-column type="index" width="50" label="序号" fixed :align="'center'" />

        <!-- 条码 -->
        <el-table-column show-overflow-tooltip prop="code" label="条码" width="140" />

        <!-- 资产码 -->
        <!-- <el-table-column show-overflow-tooltip prop="registerCode" label="资产码" width="140" /> -->

        <!-- 产品编号 -->
        <el-table-column show-overflow-tooltip prop="goodsCode" label="产品编号" width="120" />

        <!-- 销售型号 -->
        <!-- <el-table-column show-overflow-tooltip prop="saleModels" label="销售型号" width="120" /> -->

        <!-- 名称 -->
        <el-table-column show-overflow-tooltip prop="goodsName" label="名称" width="140" />

        <!-- 型号 -->
        <el-table-column show-overflow-tooltip prop="goodsModel" label="型号" width="140" />

        <!-- 规格 -->
        <el-table-column show-overflow-tooltip prop="goodsSpecName" label="规格" min-width="140" />

        <!-- 客户名称 -->
        <el-table-column show-overflow-tooltip prop="name" label="客户名称" width="140" />

        <!-- 客户手机号 -->
        <el-table-column show-overflow-tooltip prop="phone" label="客户手机号" width="120" />

        <!-- 质保时间(天)" -->
        <el-table-column
          show-overflow-tooltip
          prop="warrantyDay"
          label="质保时间(天)"
          width="100"
        />
      </el-table>
    </div>

    <div class="pagination">
      <Pagination
        ref="paginationInstance"
        :list_total="noRegisterCodeListTotal"
        @size-change="_getList"
        @current-change="_getList"
      ></Pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .no-register-goods-wrapper {
    height: 99%;
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .table {
      max-height: calc(100% - 40px);
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
